import 'package:enterprise_v6_app/app/components/custom_app_bar.dart';
import 'package:enterprise_v6_app/app/core/core.dart';
import 'package:enterprise_v6_app/app/modules/task/task_all/security_all_fundamentals_page/clock_in/scheduling_plan/scheduling_plan_controller.dart';
import 'package:table_calendar/table_calendar.dart';

/// 排班计划
class SchedulingPlanPage extends StatelessWidget {
  SchedulingPlanPage({super.key});

  final controller = Get.put(SchedulingPlanController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      init: controller,
      builder: (_) {
        return Scaffold(
          appBar: CustomAppBar(titleText: '排班表'),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  color: const Color(0xffF5F5F6),
                  height: 14.w,
                ),
                TableCalendar(
                  locale: 'zh_CN',
                  firstDay: controller.kFirstDay,
                  lastDay: controller.kLastDay,
                  pageAnimationEnabled: false,
                  daysOfWeekHeight: 60.w,
                  rowHeight: 60.w,
                  focusedDay: controller.kToday,
                  calendarFormat: CalendarFormat.month,
                  headerStyle: const HeaderStyle(formatButtonVisible: false),
                  calendarBuilders: CalendarBuilders(
                    // 其他月样式
                    outsideBuilder: (context, day, focusedDay) {
                      return _getOtherDayWidget(day: day);
                    },
                    // 当月其他日样式
                    defaultBuilder: (context, day, focusedDay) {
                      return _getCurrentDayWidget(day: day);
                    },
                    // 当日样式
                    todayBuilder: (context, day, focusedDay) {
                      return _getCurrentDayWidget(day: day);
                    },
                  ),
                  // 翻页监听
                  onPageChanged: (focusedDay) {
                    controller.kToday = focusedDay;
                    controller.getMonthPlan(focusedDay: focusedDay);
                  },
                ),
                AppGaps.vGap20,
                // 排班计划颜色
                _getClassesView(),
                // 排班计划数据
                _getClassesDataView(),
              ],
            ),
          ),
        );
      },
    );
  }

  /// 获取其他月状态显示
  Widget _getOtherDayWidget({required DateTime day}) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          height: 30.w,
          width: 30.w,
          alignment: Alignment.center,
          child: Text(
            day.day.toString(),
            style: TextStyle(
              fontSize: 14.sp,
              height: 1.2,
              fontWeight: FontWeight.w400,
              color: const Color(0xff999999),
            ),
          ),
        ),
        AppGaps.vGap2,
        SizedBox(height: 25.w)
      ],
    );
  }

  /// 获取当月每日状态显示
  Widget _getCurrentDayWidget({required DateTime day}) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          height: 30.w,
          width: 30.w,
          alignment: Alignment.center,
          child: Text(
            day.day.toString(),
            style: TextStyle(
              fontSize: 14.sp,
              height: 1.2,
              fontWeight: FontWeight.w400,
              color: const Color(0xff333333),
            ),
          ),
        ),
        AppGaps.vGap2,
        SizedBox(
          height: 25.w,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: controller.classedMap.keys.map((item) {
              return controller.isExistencePlan(classedId: item, day: day) ? _getDisplayView(color: controller.colorMap[item]!) : Container();
            }).toList(),
          ),
        )
        // SizedBox(
        //   height: 25.w,
        //   child: Column(
        //     mainAxisAlignment: MainAxisAlignment.spaceAround,
        //     children: [
        //       _getDisplayView(color: const Color(0xff33A9FF)),
        //       _getDisplayView(color: const Color(0xffFC9900)),
        //       _getDisplayView(color: const Color(0xffFD6B6B)),
        //     ],
        //   ),
        // )
      ],
    );
  }

  /// 获取显示图标
  Widget _getDisplayView({required Color color}) {
    return Container(
      height: 5.w,
      width: 30.w,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(4.r),
      ),
    );
  }

  /// 当日排班计划
  Widget _getClassesView() {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10.w, horizontal: 16.w),
      alignment: Alignment.center,
      height: 30.w,
      child: ListView.separated(
        scrollDirection: Axis.horizontal, // 设置为横向滚动
        itemCount: controller.classesList.length,
        itemBuilder: (context, index) {
          final item = controller.classesList[index];
          return Container(
            alignment: Alignment.center,
            child: Row(
              children: [
                Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: controller.getColorFromHex(item.classesColor).withOpacity(0.2),
                        borderRadius: BorderRadius.all(Radius.circular(4.w)),
                      ),
                      width: 14.w,
                      height: 14.w,
                    ),
                    Container(
                      width: 8.w,
                      height: 8.w,
                      decoration: BoxDecoration(
                        color: controller.getColorFromHex(item.classesColor),
                        borderRadius: BorderRadius.all(Radius.circular(2.w)),
                      ),
                    ),
                  ],
                ),
                AppGaps.hGap8,
                Text(
                  item.classesName,
                  style: TextStyle(
                    fontSize: 12.sp,
                    height: 1.2,
                    fontWeight: FontWeight.w400,
                    color: const Color(0xff495061),
                  ),
                ),
              ],
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return AppGaps.hGap20;
        },
      ),
    );
  }

  /// 获取排班数据
  Widget _getClassesDataView() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 12.w),
      alignment: Alignment.centerLeft,
      decoration: BoxDecoration(
        color: const Color(0xffF2F4FF),
        borderRadius: BorderRadius.all(Radius.circular(4.w)),
      ),
      child: Wrap(
        spacing: 60.w, // 主轴(水平)方向间距
        runSpacing: 12.w, // 纵轴（垂直）方向间距
        children: controller.classesList.map((bean) {
          // 班次开始与结束时间
          // 只显示时分
          final String startTime = bean.classesBeginDate;
          // startTime = startTime.substring(0, startTime.length - 3);
          final String endTime = bean.classesEndDate;
          // endTime = endTime.substring(0, endTime.length - 3);
          return Text(
            '${bean.classesName}: $startTime-$endTime',
            style: TextStyle(
              fontSize: 14.sp,
              height: 1.2,
              fontWeight: FontWeight.w400,
              color: const Color(0xff495061),
            ),
          );
        }).toList(),
      ),
    );
  }
}
